<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双十一倒计时</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #con{
            width: 500px;
            height: auto;
            margin: 50px auto;
        }
        #first,#one,#two,#three{
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-right: 10px;
            background-color: orange;
            color: #fff;
            font-size: 30px;
            border-radius: 13px;
        }
        #first{
            background-color: white;
            color: orange;
        }
        h2{
            /* text-align: center; */
            padding-left: 120px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div id="con">
        <h2>距离光棍节，还有</h2>
        <div id="first">00</div>
        <div id="one">00</div>
        <div id="two">00</div>
        <div id="three">00</div>
    </div> 
    
    <script>
        //设置结束时间
        var end=new Date('2022/11/11 00:00:00');
        //显示剩余时间
        function showTime(){
            //得到现在时间
            var now=new Date();
            //计算剩余时间，单位是毫秒数
            var total=end-now;
            //将毫秒换算成秒
            total=parseInt(total/1000);
            //计算剩余小时数,分钟数，秒数
            var day=parseInt(total/(24*60*60));
            var hours=parseInt(total%(24*60*60)/(60*60));
            var mins=parseInt(total%3600/60);
            var ss=parseInt(total%60);
            //将时间显示到对应div中
            // document.querySelector('#first').innerHTML=day < 10 ? '0' + day+'天':day+'天';
            document.querySelector('#first').innerHTML=day+'天';
            document.querySelector('#one').innerHTML=hours+'时';
            document.querySelector('#two').innerHTML=mins+'分';
            document.querySelector('#three').innerHTML=ss+'秒';
        }
        //初始化
        showTime();
        //循环计数
        setInterval(showTime,1000);
    </script>
</body>
</html>